<template>
	<view class="">
			<Loading class="loading-box" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<cu-custom bgColor="uerHead1" :isBack="true" textRight="true" type="1" @clickRight="clickRecord()">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>
		<view class="VerticalBox" v-show="isLoading">

			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
				:style="{height:swiperHeight+'px'}">
				<view class="cu-item-ver padding-lr flex align-center " :class="index==tabCur?'hover-cu':'nocur'"
					v-for="(item,index) in list" :key="index" @tap="TabSelect($event,index)" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>

			<scroll-view class="VerticalMain bg-white" scroll-y scroll-with-animation
				:style="{height:swiperHeight+'px'}" :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class=" fade-in" v-for="(item,index) in list" :key="index" :id="'main-'+index">

					<view class="" v-for="(secend,s) in item.list" :key="s">
						<view class="cu-bar solid-bottom bg-white">
							<view class="action">
								<text class=" text-blod"> {{secend.name}}</text>
							</view>
						</view>
						<view class="cu-list ">
							<view class="grid bg-white col-2 ">
								<view class=" middle " v-for="(tab,t) in secend.list " :key="t" @click="selectTab(tab.name)">
									<view class="btn-1 basis-xl text-cut  margin-sm padding-lr  text-center ">
										{{tab.name}}
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: "岗位分类",
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				swiperHeight: 0, //列表高
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',


			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});

			this.getType();

		},
		onReady() {
			uni.hideLoading();
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height);
			});
		},
		methods: {
			/**
			 * 获取类型
			 */
			getType() {
				this.apiRequest('/buyer/ListType', {

				}, "get", 0).then(res => {

					if (res.code == 200) {
						let list = {};
						for (let i in res.data) {
							list[i] = {};
							list[i].name = res.data[i].name;
							list[i].id = i;
							list[i].idd = res.data[i].id;
							let dat = {
								name:"",
								list: []
							}
							list[i].list = [];
							list[i].list[0] = dat;
							

						}
						this.list = list;
						
						for(let i in this.list){
							this.getLevel(i);
						}
						this.isLoading = true;
						
				
					} else this.error();
				}).catch(() => {
					this.error();
				})
			},
			getLevel(index) {
				this.list[index].list[0].name=this.list[index].name;
				this.apiRequest('/buyer/ListType', {
					pid: this.list[index].idd
				}, "get", 0).then(res => {
					if (res.code == 200) {
						this.list[index].list[0].list = res.data;
						this.$set(this.list,index,this.list[index]);
						this.$forceUpdate();
					
					} else this.error();
				}).catch(() => {
					this.error();
				})
			},
			selectTab(key){
				// let pages = getCurrentPages();
				// let beforePage = pages[pages.length - 2];
				// beforePage.$vm.categoryKey(key);
				uni.navigateTo({
					url:"./index?key="+key
				})
			},
		
			error() {
				uni.showModal({
					title: "温馨提示",
					content: "出现错误",
					showCancel: false,
					success: (e) => {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			TabSelect(e, index) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
				this.getLevel(index);

			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id

						return false
					}
				}
			}
		}


	}
</script>

<style scoped>
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item-ver {
		width: 100%;
		text-align: left;
		margin: 0;
		border: none;
		min-height: 100rpx;

		position: relative;
	}

	.VerticalNav.nav .cu-item-ver.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item-ver.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}

	.nocur {
		background-color: transparent;
	}

	.btn-1 {
		height: 64rpx;
		background-color: #F0F0F0;
		color: #000000;
		line-height: 64rpx;
		border-radius: 5rpx;
		position: relative;
	}

	.btn-1::active {
		top: 2px;

	}

	.hover-cu {
		background-color: white;
		color: #0000FF;
	}
</style>
